<template>
  <a-layout>
      <a-layout-header><i class="iconfont icon-baobiao"></i>学生心理测评报告</a-layout-header>
      <a-layout-content>
        <a-card :bordered="false"> 
            <a-row>  
             <a-col :span="2"> <a-button type="primary" @click="back"> <a-icon type="left" />返回</a-button></a-col>
              <a-col  :span="5" :offerset="2">学号:{{stu_id}}</a-col>
              <a-col :span="5" :offerset="2">测试项目:{{type}}</a-col>
              <a-col  :span="5" :offerset="1">测评时间:{{date}}</a-col>
              </a-row>
           </a-card>
        <a-card>
        <a-card-grid style="width:50%;text-align:center" >
       <div id="pic1"></div>
        </a-card-grid>
      <a-card-grid style="width:50%;text-align:center" >
        <div id=pic2></div>
       </a-card-grid> </a-card> 
      <a-card v-for="(i,index) in result" :key=index >
          <i class="iconfont icon-tijikongjian" :style="'color:'+colors[index]"></i> 
          <strong style="font-size:20px">{{dem[index]}}：</strong>您在给维度上得分：<span class="score">{{i}}</span>
          <span v-if="i>=3" class="n1" >{{suggestions[index]}}</span>
          <span v-if="i>=2&&i<3" class="n2">{{suggestions[index]}}</span>
          <span v-if="i<2" class="n3">{{suggestions[index]}}</span>
            <br/>{{dem_intro[index]}}
      </a-card>
      </a-layout-content>
      <a-layout-footer> <tr>
      <td>感谢您使用本测验！
        <p align="left">每个人的能力、个性或者行为方式都是非常复杂的,不管是多好的测验, 仅仅靠一套测验数据来解释或者说归纳人的性格总会显得淡薄, 甚至您会觉得有些地方与您自己的认知相悖. 如果出现这种情况, 可以有如下几种原因：请回忆您做答时候的情形, 您是根据自己的第一反应做出的回答吗? 您是否受到自己应该选择什么或者别人希望您选择什么的影响？为了使您的测验结果得到最为恰当的解释, 您可进一步向有关专业人士咨询。</p>
      </td>
    </tr></a-layout-footer>
  </a-layout>
</template>

<script>
import {request} from '../../api'
import {dem,dem_intro,colors}from './scl'
import *as echarts from 'echarts'
export default {
    
    name:'SCLresult',
    props:['stu_id','type','result_id','date'],
    data(){
        return{
           name:'',
           sex:'',
           stu_class:'',
           result:[],
           suggestions:[],
           dem_intro,
           dem,
           colors
        }
    },
    mounted() {
      this.initData()    
    },
    methods: {
        //从后端获取当前学生的信息以及测试结果
      initData(){
            request({method:"post",url:'/SCLtest/SCL90_result',
              data:{id:this.$store.state.login_id,
              type:'scl',result_id:this.result_id}}).then((res)=>{
                this.name=res.data.name;
                this.sex=res.data.sex=='0'?'男':'女';
                this.stu_class=res.data.class;
                this.result=res.data.result;
                 this.getSuggestions();
                const option1={
  color:new echarts.graphic.LinearGradient(
    0,0,0,1,
    [
      {offset:0,color:'#00fffb'},
      {offset:1,color:'#0061ce'}
    ]
  ),
  title:{
    show:true,
    text:'得分情况',
    textStyle:{
      color:'black',
      fontSize:22
    }
  },             
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend:{
    data:['各项得分'],
    show:true,
    right:'right',
    textStyle:{
      fontSize:12
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    show:true,
     border:'#1890FF'
  },
  xAxis: [
    {
      type: 'category',
      data: dem,
      axisTick: {
        alignWithLabel:true,
        show:true, 
      },
      axisLabel:{
        color:'black',
        interval:0,
        rotate:40
      },
      axisLine:{
        lineStyle:{
          color:'blue'
        }
      },
    }
  ],
  yAxis: [
    { 
      minInterval:1,
     barWidth: '10%',
      type: 'value',
      axisTick:{
        show:true
      },
      axisLine:{
        lineStyle:{
          color:'blue'
        }
      },
      axisLabel:{
        fontSize:16
      },
      min: function (value) {
    return 0;
},
max:function(value){
  return 5;
}
    }
  ],
  series: [
    {
      name: '各项得分',
      type: 'bar',
      data:res.data.result
  
    }
  ]
};
  var pic1=document.getElementById("pic1")
      var echart1=echarts.init(pic1)
      echart1.setOption(option1)
      // console.log(option1)
    const option2={legend: {
    top: 'top',},
    title: {
    text: '状况分析',
    left: 'left',
    textStyle:{
      fontSize:22
    }
  },
  tooltip:{
    trigger:'item',
    formatter:"{a}<br/>{b}:{c} ({d}%)"
  },
  color:['#52C41A','#FAAD14','#F5222D'],
  label:{fontSize:18},
  labelLine:{
    length:6,
    length2:8
  },
  series: [
    {
      name: '状况分析',
      type: 'pie',
      radius: [ '15%', '70%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: res.data.status[0], name: '正常' },
        { value: res.data.status[1], name: '基本正常' },
        { value: res.data.status[2], name: '不正常' },
      ]
    }
  ]}
   var pic2=document.getElementById('pic2')
      var echart2=echarts.init(pic2)
      echart2.setOption(option2)
      // console.log(option2)
      window.addEventListener("resize",function(){
        echart1.resize();
      })
      window.addEventListener("resize",function(){
        echart2.resize();
      })

      
                })

        },
        getSuggestions(){
             var suggestions=[]
        this.result.forEach((item)=>{
               if(item<2){
                   suggestions.push('不正常，请联系心理老师！')
               }
               else if(item<3){
                   suggestions.push('基本正常')
               }
               else
               {
                  suggestions.push('正常')
               }
           })
          this.suggestions=suggestions
        },
        //通过每个模块的得分判断是否正常，结果存入数组
        
       back(){
           this.$router.back();
       }
    },

}
</script>

<style lang="less" scoped>
.ant-layout-header{
  padding:5px ;
    background-color: #1890FF;
    color:white;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    height:50px !important;
    line-height: 40px;
}
.ant-card{
  font-size: 16px;
  font-weight: bold;
}

.content{
    font-size: 16px;
    padding: 15px;
}

.content :hover{
  background-color: white;
}
.icon-baobiao{
  margin-right: 15px;
  font-size: 36px;
  

}
#pic1,#pic2{
  height: 400px;
}
.icon-tijikongjian{
  font-size: 28px;
}
.score,.n1,.n2,.n3{
  font-size:18px;
  font-weight: bold;
  font-style: initial;
}
.score{
  color:blue;
  margin-right: 10px;
}
.n1{
  color:lightgreen
}
.n2{
  color:orange
}
.n3{
  color:red
}


</style>